<#assign ctx = request.contextPath />
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>商品列表</title>
	
		<link rel="stylesheet" href="${ctx}/css/common.css" />
		<link rel="stylesheet" href="${ctx}/css/shop_list.css" />
		<script type="text/javascript" src="${ctx}/js/jquery-1.11.0.js" ></script>
		<script type="text/javascript" src="${ctx}/js/common.js" ></script>
		<script type="text/javascript" src="${ctx}/js/city.js" ></script>
		<script type="text/javascript" src="${ctx}/js/shop_list.js" ></script>
		<script type="text/javascript" src="${ctx}/js/shopCar.js" ></script>

	</head>
	<body>
		<div id="header">
		<!-- top -->
		<#include "common/top.html"/>
		<!-- top end -->
		<!-- search -->
		<#include "common/search.html"/>
		<!-- search end -->
		<div class="header_bottom">
			<div class="container">
		
				<div class="all">
					<a href="javascript:;">全部商品</a>
					<ul >				
						<li><a href="shop_list.html">清洁</a></li>
						<li><a href="shop_list.html">保湿</a></li>
						<li><a href="shop_list.html">滋润</a></li>
						<li><a href="shop_list.html">清凉舒爽</a></li>
						<li><a href="shop_list.html">补水</a></li>
						<li><a href="shop_list.html">清爽</a></li>
						<li><a href="shop_list.html">深层清洁</a></li>
						<li><a href="shop_list.html">舒缓肌肤</a></li>
					</ul>
				</div>
				<div class="nav">
					<ul>
						<li>
							<a href="shop_list.html">去屑</a>
							
						</li>
						<li>
							<a href="shop_list.html">健身</a>
									
						</li>
						<li>
							<a href="shop_list.html">花味</a>
							
						</li>
						<li>
							<a href="shop_list.html">磨砂</a>
							
						</li>
						<li>
							<a href="shop_list.html">沐浴露</a>
							
						</li>
						<li>
							<a href="shop_list.html">牛奶味</a>
							
						</li>
						<li>
							<a href="shop_list.html">香皂</a>
							
						</li>
						<li>
							<a href="shop_list.html">驱蚊止痒</a>
						
						</li>
						<li>
							<a href="shop_list.html">泡澡</a>		
						</li>					
						<li>
							<a href="shop_list.html">沐浴套装</a>
						</li>
						<li>
							<a href="shop_list.html">果味</a>
						</li>
					</ul>
				</div>	
			</div>
		</div>				
	</div>
		<div id="article clear">
			<div class="container">
				<div class="article_top">
					<div class="top clear">
						<div class="top_left">
							<span>全部商品&nbsp;&gt;</span>	
							<form action="" method="post">				
								<input type="text" placeholder="清洁" />
								<img src="${ctx}/images/show_list01.png" alt="show_list01" />
							</form>
												
						</div>
						<span>共 18107件相关商品</span>
					</div>
					
					<div class="middle">
						<div class="brand clear">
							<div class="brand_left">
								<span>品牌</span>
							</div>
							<div class="input">	
								<form action="" method="post">
									<ul>
										<li>
											<label >
												<input type="checkbox"/>kuyura/可悠然
											</label>
										</li>
										<li>
											<label >
												<input type="checkbox" />LUX/力士 
											</label>
										</li>
										<li>
											<label >
												<input type="checkbox"> Dove/多芬
											</label>	
										</li>
										<li>
											<label>
												<input type="checkbox" /> safeguard/舒肤佳 
											</label>
										</li>
										<li>
											<label>
												<input type="checkbox" /> Olay/玉兰油
											</label>
										</li>
										<li>
											<label>
												<input type="checkbox" /> Johnson’&nbsp;sbaby/强生婴儿
											</label>
										</li>
										<li>
											<label>
												<input type="checkbox" /> 六神
											</label>	
										</li>
										<li>
											<label>
												<input type="checkbox" /> Adidas/阿迪
											</label>
										</li>
										<li>
											<label>
												<input type="checkbox" /> 达斯
											</label>		
										</li>
										<li>
											<label>
												<input type="checkbox" /> The Face Shop/菲诗小铺  
											</label>
										</li>
										<li>
											<label>
												<input type="checkbox" /> 惠润 Dettol/滴露
											</label>	
										</li>
										<li>				
											<label>
												<input type="checkbox" /> 强生美肌
											</label>
										</li>
										<li>				
											<label>
												<input type="checkbox" /> LYNX/凌仕 
											</label>
										</li>
										<li>				
											<label>
												<input type="checkbox" />L'occitane/欧舒丹
											</label>
										</li>
									</ul>
									<button type="reset" id="return"><a href="javascript:;">取消</a></button>
									<button type="submit" id="confirm" ><a href="javascript:;">确定</a></button>					
								</form>			
							</div>
							<div class="brand_middle">
								<ul>
									<li><a href="javascript:void(0)">kuyura/可悠然  </a></li>
									<li><a href="javascript:void(0)">LUX/力士     </a></li>
									<li><a href="javascript:void(0)"> Dove/多芬 </a></li>
									<li><a href="javascript:void(0)"> safeguard/舒肤佳 </a></li>
									<li><a href="javascript:void(0)"> Olay/玉兰油</a></li>
									<li><a href="javascript:void(0)"> Johnson’&nbsp;sbaby/强生婴儿</a></li>
									<li><a href="javascript:void(0)">六神</a></li>
									<li><a href="javascript:void(0)">Adidas/阿迪 </a></li>
									<li><a href="javascript:void(0)">达斯 </a></li>
									<li><a href="javascript:void(0)">The Face Shop/菲诗小铺    </a></li>
									<li><a href="javascript:void(0)">惠润 Dettol/滴露</a></li>
									<li><a href="javascript:void(0)">强生美肌</a></li>
									<li><a href="javascript:void(0)">LYNX/凌仕  </a></li>
									<li><a href="javascript:void(0)">L'occitane/欧舒丹 </a></li>
								</ul>
							</div>	
							<div class="brand_right">
								<span data-id="0"><a href="javascript:;">&#43;多选</a></span>
								<span data-id="0">
									<a href="javascript:;">更多&or;</a>
								</span>
							</div>
						</div>
						<div class="sort clear clear">
							<div class="sort_left">
								<a href="#"><img src="${ctx}/images/show_list02.png" alt="show_list02" /></a>
								<span>分类</span>								
							</div>
							<div class="sort_middle">
								<ul>
									<li ><a href="javascript:void(0)">沐浴露</a></li>
									<li><a href="javascript:void(0)">沐浴露/身体乳</a></li>
									<li><a href="javascript:void(0)">婴儿沐浴露</a></li>
									<li><a href="javascript:void(0)">沐浴露</a></li>
									<li><a href="javascript:void(0)">沐浴露/身体乳</a></li>
									<li><a href="javascript:void(0)">婴儿沐浴露</a></li>
								</ul>
							</div>
							<div class="sort_right">
								<span data-id="0">
									<a href="javascript:;" >更多&or;</a>
								</span>
							</div>
						</div>
						<div class="orgin clear">
							<div class="orgin_left">
								<span>产地</span>
							</div>
							<div class="orgin_middle">
								<ul>
									<li ><a href="javascript:void(0)">中国大陆</a></li>
									<li><a href="javascript:void(0)">日本</a></li>
									<li><a href="javascript:void(0)">韩国</a></li>
									<li><a href="javascript:void(0)">德国</a></li>
									<li><a href="javascript:void(0)">台湾</a></li>
									<li><a href="javascript:void(0)">美国</a></li>
									<li><a href="javascript:void(0)">法国</a></li>
									<li><a href="javascript:void(0)">其他国家</a></li>
								</ul>
							</div>						
						</div>
						<div class="function clear">
							<div class="function_left">
								
							<span>功能</span>
								
							</div>
							<div class="function_middle">
								<ul >
									<li><a href="javascript:void(0)">清洁</a></li>
									<li><a href="javascript:void(0)">保湿</a></li>
									<li><a href="javascript:void(0)">滋润</a></li>
									<li><a href="javascript:void(0)">清凉舒服</a></li>
									<li><a href="javascript:void(0)">补水</a></li>
									<li><a href="javascript:void(0)">清爽</a></li>
									<li><a href="javascript:void(0)">深层清洁</a></li>
									<li><a href="javascript:void(0)">舒缓肌肤</a></li>
								</ul>
							</div>
						</div>
						<div class="bottom clear">
							<div class="bottom_left">
								
							<span>是否量贩装</span>
								
							</div>
							<div class="bottom_middle">
								<ul>
									<li><a href="javascript:void(0)">是</a></li>
									<li><a href="javascript:void(0)">否</a></li>
									<li><a href="javascript:void(0)">滋润</a></li>
									
								</ul>
							</div>
						</div>
						<div class="bottomr clear">
							<div class="bottomr_left">
								
							<span>是否量贩装</span>
								
							</div>
							<div class="bottomr_middle">
								<ul>
									<li><a href="javascript:void(0)">是</a></li>
									<li><a href="javascript:void(0)">否</a></li>
									<li><a href="javascript:void(0)">滋润</a></li>
								</ul>
							</div>
						</div>
						<div class="options">
							<img src="${ctx}/images/shop_listO.png"/>
							<span data-id="0">
								<a href="javascript:void(0)">更多选项 &nbsp;&or;</a>
							</span>
						</div>
					</div>
					
					<div class="bottom">
						<div class="sales">
							<ul>
								<li data-id="0">
									<a href="javascript:;">综合<img src="${ctx}/images/show_list10.png" alt="show_list10" /></a>
									
								</li>
								<li data-id="0">
									<a href="javascript:;">人气<img src="${ctx}/images/show_list10.png" alt="show_list10" /></a>
									
								</li>
								<li data-id="0">
									<a href="javascript:;">新品<img src="${ctx}/images/show_list10.png" alt="show_list10" /></a>
									
								</li>
								<li data-id="0">
									<a href="javascript:;">销量<img src="${ctx}/images/show_list10.png" alt="show_list10" /></a>
									
								</li>
								<li data-id="0">
									<a href="javascript:;">价格 <img src="${ctx}/images/show_list03.png" alt="show_list03"/><img src="${ctx}/images/show_list04.png" alt="show_list04" /></a>
									
								</li>
							</ul>							
						</div>
						<div class="middle">
							<div class="address">
								<span>收货地:</span>							
								<select id="province" >
									<option value="">杭州</option>
								</select>
								
								<img src="${ctx}/images/show_list05.png" alt="show_list05" />
							
								
							</div>												
							<div class="checkbox">
								<input type="text" placeholder="&yen;请输入"/>
								<span>-</span>
								<input type="text" placeholder="&yen;请输入"/>
								 <label class="more">
								 	<div class="left">
								 		<ul>
								 			<li>
								 				<img src="${ctx}/images/shop_car01.png" alt="1"/><span>包邮</span>						 			
								 			</li>
								 			<li>
								 				<img src="${ctx}/images/shop_car01.png" alt="1"/><span>折扣</span>
								 			</li>
								 			<li>
								 				<img src="${ctx}/images/shop_car01.png" alt="1"/><span>搭配减价</span>
								 			</li>
								 			<li>
								 				<img src="${ctx}/images/shop_car01.png" alt="1"/><span>包邮</span>
								 			</li>
								 			<li>
								 				<img src="${ctx}/images/shop_car01.png" alt="1"/><span>折扣</span>
								 			</li>
								 			<li>
								 				<img src="${ctx}/images/shop_car01.png" alt="1"/><span>搭配减价</span>
								 			</li>
								 		</ul>
								 	</div>
								    <span data-id="0">
								    	<a href="javascript:;">更多&or;</a>
								    </span>
								 </label>																   																													
							</div>
							<div class="store">
								<a href="javascript:;" data-id="0"><img src="${ctx}/images/show_list07.png" alt="show_list07" id="store" />店铺</a>
								<a href="javascript:;" data-id="0"><img src="${ctx}/images/show_pp02.png"/ id="big">大图</a>
								<a href="javascript:;" data-id="0"><img src="${ctx}/images/show_list09.png"/ id="small">小图</a>
							</div>						
						</div>
						<div class="right">
							<span>1&#47;100</span>
							<span>&lt;</span>
							<span>&gt;</span>
						</div>
					</div>
				</div>
				<div class="article_middle clear">
					<div class="big">
						<div class="small">
							<ul>
								<li>
									<a href="javascript:;"><img src="${ctx}/images/slb01.png" alt="slb01" /></a>
									<a href="user.html">约翰娜会员</a>
								</li>
								<li>
									<a href="javascript:;"><img src="${ctx}/images/slb02.png" alt="slb02" /></a>
									<a href="shop_cart.html">我的购物车</a>
								</li>
								<li>
									<a href="javascript:;"><img src="${ctx}/images/slb03.png" alt="slb04" /></a>
									<a href="#">约翰娜会员</a>
								</li>
								<li>
									<a href="javascript:;"><img src="${ctx}/images/slb04.png" alt="slb04" /></a>
									<a href="#">爱心</a>
								</li>
								<li>
									<a href="javascript:;"><img src="${ctx}/images/slb05.png" alt="slb05" /></a>
									<a href="">闹钟</a>
								</li>
								<li>
									<a href="javascript:;"><img src="${ctx}/images/slb06.png" alt="slb06" /></a>
									<a href="#">留言</a>
								</li>
								<li>
									<a href="javascript:;"><img src="${ctx}/images/slb07.png" alt="slb07" /></a>
									<a href="#">回到顶部</a>
								</li>
								<li>
									<a href="javascript:;"><img src="${ctx}/images/slb08.png" alt="slb08" /></a>
									<a href="#">反馈</a>
								</li>
							</ul>
						</div>
					</div>
					<div class="product">
						<ul>
						
							<#list goodsList as goods>
								<li>
									<div>
										<a href="${ctx}/customer/goods/getGoodsDetails?id=${goods.id}">
											<img src="${ctx}/file/${goods.image}" alt="show_product01" style="width:117px;height:192px;"/>
										</a>
										<span>&yen;${goods.favorablePrice}</span>
										<h1><a href="${ctx}/customer/goods/getGoodsDetails?id=${goods.id}">
										<#if goods.title?length gt 20>
											${goods.title?substring(0,20)}
											<#else>
											${goods.title}
										</#if>
										</a></h1>
									</div>
									<div>
										<a href="javascript:showAddCar();" >加入购物车</a>
										<span><img src="${ctx}/images/show_list12.png"/>2456</span>
										<span><img src="${ctx}/images/show_list13.png"/>96%</span>
									</div>
								</li>
							</#list>
							
						</ul>
					</div>
				<div class="page clear">
					<#if pageModel.recordCount??>
					    <#import "common/pager.html" as page>
					    <@page.pager pageIndex=pageModel.pageIndex pageSize=pageModel.pageSize recordCount=pageModel.recordCount toURL="${ctx}/customer/goods/showGoodsList"/>
					</#if>
				</div>
				</div>
				<div class="article_bottom clear">
					<h1>热卖商品</h1>
					<div class="products">
						<ul>
							<li>
								<a href="pro_details.html"><img src="${ctx}/images/show_hot01.jpg" alt="show_hot01" /></a>
								<p>¥27.90   <span>¥98.00 </span> <span>月成交 </span><span> 63558笔</span></p>
								<h2><a href="pro_details.html">正品COCOVEL沐浴露 香水味...</a></h2>
							</li>
							<li>
								<a href="pro_details.html"><img src="${ctx}/images/show_hot02.jpg" alt="show_hot02" /></a>
								<p>¥27.90   <span>¥98.00 </span> <span>月成交 </span><span> 63558笔</span></p>
								<h2><a href="pro_details.html">正品COCOVEL沐浴露 香水味...</a></h2>
							</li>
							<li>
								<a href="pro_details.html"><img src="${ctx}/images/show_hot03.jpg" alt="show_hot03" /></a>
								<p>¥27.90   <span>¥98.00 </span> <span>月成交 </span><span> 63558笔</span></p>
								<h2><a href="pro_details.html">正品COCOVEL沐浴露 香水味...</a></h2>
							</li>
							<li>
								<a href="pro_details.html"><img src="${ctx}/images/show_hot04.jpg" alt="show_hot04" /></a>
								<p>¥27.90   <span>¥98.00 </span> <span>月成交 </span><span> 63558笔</span></p>
								<h2><a href="pro_details.html">正品COCOVEL沐浴露 香水味...</a></h2>
							</li>
							<li>
								<a href="pro_details.html"><img src="${ctx}/images/show_hot05.jpg" alt="show_hot05" /></a>
								<p>¥27.90   <span>¥98.00 </span> <span>月成交 </span><span> 63558笔</span></p>
								<h2><a href="pro_details.html">正品COCOVEL沐浴露 香水味...</a></h2>
							</li>
						</ul>
					</div>
				</div>
			</div>		
		</div>
		<!-- footer -->
		<#include "common/footer.html"/>
		<!-- footer end -->
	</body>
</html>
